import { Accordion } from "@mantine/core";

interface IAccordionProps {
  opens?: string[]
  children?: React.ReactElement | React.ReactElement[]
}

interface IAccordionItemProps {
  value: string
  title: string
  children?: React.ReactElement | React.ReactElement[]
}

export function IAccordionItem(props: IAccordionItemProps) {
  const {
    value,
    title,
    children
  } = props;

  return (
    <Accordion.Item value={value}>
      <Accordion.Control className='bg-gray-100 h-[28px] text-[12px]'>{title}</Accordion.Control>
      <Accordion.Panel className='bg-white' styles={{ content: { padding: '4px', paddingTop: '10px' } }} >
        {children}
      </Accordion.Panel>
    </Accordion.Item>
  )
}

export default function IAccordion(props: IAccordionProps) {
  const {
    opens = [],
    children
  } = props;

  return (
    <Accordion multiple defaultValue={opens} >
      { children }
    </Accordion>
  )
}